<template>
	<button class="global-btn"
		:style="{'width':width?width+'rpx':'100%','height':height?height+'rpx':'100%','font-size':fontSize+'rpx','border-radius':borderRadius+'rpx'}"
		@click="click" :disabled="disabled" :class="{'disabled':disabled}"><i v-if="icon" class="iconfont icon" :class="`icon-${icon}`"/>{{btn_text}}</button>
</template>

<script lang="ts">
	export default {
		name: 'navbar',
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits,
		toRefs
	} from 'vue';
	const props = defineProps({
		btn_text: {
			type: String,
			default: '',
		},
		width: {
			type: Number || String,
			// default: '100%',
		},
		height: {
			type: Number || String,
			// default: '100%',
		},
		fontSize: {
			type: Number,
			default: 32,
		},
		disabled:{
			type:Boolean,
			default:false,
		},
		borderRadius:{
			type:Number,
			default:52,
		},
		icon:{
			type:String
		},
	})
	const {
		btn_text,
		width,
		height
	} = toRefs(props);

	const emit = defineEmits(['click']);
	const click = (e: MouseEvent) => {
		emit('click', e)
	}
</script>

<style lang="scss" scoped>
	@import "./style.scss";
</style>
